<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title><%=session.getAttribute("theName")%></title>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var link = $('ul li a');
		link.click(function() {
			var pageLink = $(this).attr('href');

			$('div.placeholder').load(pageLink);

			return false;
		});
	});
</script>


<style>
div.colone-right big b a {
	text-transform: uppercase;
}

div.colone-right big b {
	color: white;
}

.colone-right td b {
	color: white;
}
.colone-left ul {
	list-style: none;
}

.colone-left ul a {
	text-decoration: none;
}
body {
	background-color: #AAAAAA;
}

a.addComment {
	text-decoration: none;
	display: block;
	height: 45px;
	width: 196px;
	background: url("add comment crno.png") no-repeat;
}

a.addComment:HOVER,a.addComment:ACTIVE {
	background: url("add comment belo.png") no-repeat;
}

a.addPicture {
	text-decoration: none;
	display: block;
	height: 45px;
	width: 196px;
	background: url("add picture crno.png") no-repeat;
}

a.addPicture:HOVER,a.addPicture:ACTIVE {
	background: url("add picture belo.png") no-repeat;
}

a.addVideos {
	text-decoration: none;
	display: block;
	height: 45px;
	width: 196px;
	background: url("edit personal information crno.png") no-repeat;
}

a.addVideos:HOVER,a.addVideos:ACTIVE {
	background: url("edit personal info belo.png") no-repeat;
}

a.addLink {
	text-decoration: none;
	display: block;
	height: 45px;
	width: 196px;
	background: url("add link crno.png") no-repeat;
}

a.addLink:HOVER,a.addLink:ACTIVE {
	background: url("add link belo.png") no-repeat;
}

.mid {
	background-image: url('1.png');
	background-repeat: repeat-x;
	height: 800px;
	width: 70%;
}

.container {
	position: relative;
}

.wrapper {
	width: 860px;
	margin: 0 auto;
}

.colone-left {
	float: left;
	width: 370px;
	margin: 0 20px 0 0;
}

.colone-right {
	float: right;
	width: 470px;
	margin: 0 0 0 0;
}

a {
	font-weight: bold;
	color: #fff;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	color: #000;
}

div.slider {
	width: 250px;
	height: 280px;
	position: relative;
}

div.slider ul {
	margin: 0;
	padding: 0;
}

div.slider ul li img {
	width: 100px;
	height: 150px;
}

div.slider ul li {
	width: 250px;
	list-style: none;
}

.prevBtn {
	position: absolute;
	bottom: 10px;
	left: 10px;
}

.nextBtn {
	position: absolute;
	bottom: 10px;
	right: 10px;
}

h1 {
	font-size: 30px;
	color: white;
}
</style>
</head>
<body>

	<map name="links">
		<area shape="rect" alt="" coords="14, 0, 260, 50"
			href="ViewPersonsFriendsLoggedUserServlet">
		<area shape="rect" alt="" coords="270, 0, 526, 50"
			href="RegistredUserHomeServlet">
		<area shape="rect" alt="" coords="536, 0, 780, 50" href="ViewWall.jsp">
	</map>

	<div align="center">
		<div class="mid">
			<div class="container">
				<div class="wrapper">
					<div class="header" align="center">
						<img alt="click here to navigate" src="Header.png" usemap="#links">
					</div>
					<div class="header" align="right">
						<a href="LogoutServlet" style="color: white;">Logout</a>
					</div>
					<div class="colone-right">

						<%
							pageContext.setAttribute("picture", 1);
							pageContext.setAttribute("video", 2);
							pageContext.setAttribute("link", 3);
						%>

						<c:forEach items="${loggedUsersOwnedPosts}" var="post">
							<div style="width: 600px;"
								align="center">

								<!-- If post is picture -->
								<c:if test="${post.type eq picture}">
									<table border="0" align="center" style="width: 270px;">
										<tr>
											<td width="20%" rowspan="2"><c:choose>
													<c:when test='${post.poster.picture == null}'>
														<img align="middle" width="50" height="50"
															src="anonimus.jpg">
													</c:when>
													<c:when test='${post.poster.picture != null}'>
														<img align="middle" width="50" height="50"
															src="/images/networx/profile/thumbnails/${post.poster.picture}">
													</c:when>
													<c:otherwise>
													</c:otherwise>
												</c:choose></td>
											<td width="80%" height="10px;" align="left"><b>${post.poster.firstName}&nbsp;${post.poster.lastName}</b>
											</td>
										</tr>
										<tr>
											<td width="80%" height="10px;" align="left"><b>${post.date}</b>
											</td>
										</tr>
									</table>

									<div style="width: 550px;">
										<big><b>${post.title} &nbsp;-&nbsp; ${post.text}</b></big>
									</div>

									<img src="/images/networx/imagePost/${post.content}"
										width="400px;">
								</c:if>


								<!-- If post is video -->
								<c:if test="${post.type eq video}">
									<table border="0" align="center" style="width: 270px;">
										<tr>
											<td width="20%" rowspan="2"><c:choose>
													<c:when test='${post.poster.picture == null}'>
														<img align="middle" width="50" height="50"
															src="anonimus.jpg">
													</c:when>
													<c:when test='${post.poster.picture != null}'>
														<img align="middle" width="50" height="50"
															src="/images/networx/profile/thumbnails/${post.poster.picture}">
													</c:when>
													<c:otherwise>
													</c:otherwise>
												</c:choose></td>
											<td width="80%" height="10px;" align="left"><b>${post.poster.firstName}&nbsp;${post.poster.lastName}</b>
											</td>
										</tr>
										<tr>
											<td width="80%" height="10px;" align="left"><b>${post.date}</b>
											</td>
										</tr>
									</table>

									<div style="width: 550px;">
										<big><b>${post.title} &nbsp;-&nbsp; ${post.text}</b></big>
									</div>

									<object width="400" height="330" align="middle">
										<param name="movie"
											value="${post.content}?version=3&autohide=1&showinfo=0"></param>
										<param name="allowScriptAccess" value="always"></param>
										<embed src="${post.content}?version=3&autohide=1&showinfo=0"
											type="application/x-shockwave-flash" allowfullscreen="true"
											width="400" height="330"></embed>
									</object>
								</c:if>


								<!-- If post is link -->
								<c:if test="${post.type eq link}">
									<table border="0" align="center" style="width: 270px;">
										<tr>
											<td width="20%" rowspan="2"><c:choose>
													<c:when test='${post.poster.picture == null}'>
														<img align="middle" width="50" height="50"
															src="anonimus.jpg">
													</c:when>
													<c:when test='${post.poster.picture != null}'>
														<img align="middle" width="50" height="50"
															src="/images/networx/profile/thumbnails/${post.poster.picture}">
													</c:when>
													<c:otherwise>
													</c:otherwise>
												</c:choose></td>
											<td width="80%" height="10px;" align="left"><b>${post.poster.firstName}&nbsp;${post.poster.lastName}</b>
											</td>
										</tr>
										<tr>
											<td width="80%" height="10px;" align="left"><b>${post.date}</b>
											</td>
										</tr>
									</table>

									<div style="width: 550px;">
										<big><b>${post.title} &nbsp;-&nbsp; ${post.text}</b></big> <br>
										<big><b><a href="${post.content}" target="_blank">${post.content}</a></b></big>
									</div>
								</c:if>


								<!-- Adding postComment feild -->
								<form
									action="AddCommentServlet?postID=${post.id}"
									method="post" name="commentOnPostForm">

									<table border="0" align="center" style="width: 270px;">
										<tr>
											<td width="20%" rowspan="2"><c:choose>
													<c:when test='${logovaniUser.picture == null}'>
														<img align="middle" width="50" height="50"
															src="anonimus.jpg">
													</c:when>
													<c:when test='${logovaniUser.picture != null}'>
														<img align="middle" width="50" height="50"
															src="/images/networx/profile/thumbnails/${logovaniUser.picture}">
													</c:when>
													<c:otherwise>
													</c:otherwise>
												</c:choose></td>
											<td width="80%" height="10px;" align="left"><b>Write
													Comment:</b></td>
										</tr>
										<tr>
											<td width="80%" height="10px;" align="left"><input
												type="text" name="commentText"> <input type="submit"
												value="Okay"></td>
										</tr>
									</table>
								</form>

								<!-- showing comments -->
								<c:forEach items="${post.comments}" var="comment">
									<div style="width: 400px;">
										<table border="0" align="center" style="width: 400px;">
											<tr>
												<td width="15%" rowspan="2"><c:choose>
														<c:when test='${comment.commetator.picture == null}'>
															<img align="middle" width="50" height="50"
																src="anonimus.jpg">
														</c:when>
														<c:when test='${comment.commetator.picture != null}'>
															<img align="middle" width="50" height="50"
																src="/images/networx/profile/thumbnails/${comment.commetator.picture}">
														</c:when>
														<c:otherwise>
														</c:otherwise>
													</c:choose></td>
												<td width="85%" height="10px;" align="left"><b>${comment.commetator.firstName}&nbsp;${comment.commetator.lastName}
														&nbsp;&nbsp;${comment.date}</b></td>
											</tr>
											<tr>
												<td width="85%" height="10px;" align="left">${comment.text}</td>
											</tr>
										</table>
									</div>
								</c:forEach>

								<br> <br> <br> <br>
							</div>
						</c:forEach>
					</div>
					<div class="colone-left">
						<p style="color: white; text-align:left;">${logovaniUser.firstName} is checking
							out his wall</p>
						<ul style="display: block; float: left;">
							<li><a class="addPicture" href="AddPicture.jsp"> &nbsp;
							</a></li>
							<li><a class="addVideos" href="AddVideo.jsp">
									&nbsp; </a></li>
							<li><a class="addLink" href="AddLink.jsp"> &nbsp; </a>
							</li>
						</ul>
						<div align="left"
							style="display: block; height: 208px; width: 370px;">
							<div class="placeholder" style="margin-top: 290px;"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
